<template>
  <div>
    <!-- 表单设计编辑 -->
    <div v-if="formType === 1">
      <a-slider
        v-model:value="setting.options.defaultValue"
        :min="setting.options.min"
        :max="setting.options.max"
        :step="setting.options.step"
        :disabled="setting.options.disabled"
        :range="setting.options.isRange"
        :style="{ width: setting.options.width + '%' }"
      ></a-slider>
    </div>
    <!-- 表单展示 -->
    <div v-else>
      <!-- 表单展示编辑 -->
      <div v-if="setting.fieldState === 0">
        <a-slider
          v-model:value="dataModel" 
          :min="setting.options.min"
          :max="setting.options.max"
          :disabled="setting.options.disabled"
          :step="setting.options.step"
          :range="setting.options.range"
          :style="{ width: setting.options.width + '%' }"
        ></a-slider>
      </div>
      <!-- 表单展示只读 -->
      <div v-else>
        <a-slider
          v-model:value="dataModel" 
          disabled
          :range="setting.options.range"
          :style="{ width: setting.options.width + '%' }"
        ></a-slider>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dataModel: this.models[this.setting.table + '-' + this.setting.field],
    }
  },

  props: {
    formType: {
      type: Number,
      default: 0,
    },
    setting: {
      type: Object,
      default: null,
    },

    models: {
      type: Object,
      default: Object,
    },
  },
  created() {},
  methods: {},
  watch: {
    dataModel: {
      deep: true,
      handler(val) {
        this.models[this.setting.table + '-' + this.setting.field] = val
      },
    },
  },
}
</script>